<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css" media="screen">
*{
    margin: 0;
    padding: 0;
}
.circleProgress_wrapper{
    position:relative;
    margin:auto;
    width:300px;
    height:300px;
}
.circleProgress{
    width:100%;
    height:100%;
    box-sizing: border-box;
    border:10px solid transparent;
    position:absolute;
}
.circleProgress_bg{
    border-color: #dcdcdc;
    border-radius:50%;
}
.circleProgress_half{
  width: 50%;
  height: 100%;
  top:0;
  position: absolute;
  overflow: hidden;
}
.circleProgress_left{
  left:0;
}
.circleProgress_right{
  right:0;
}
.circleProgress_over{
    width:200%;
    border-radius: 50%;
}
.circleProgress_left .circleProgress_over{
    -webkit-transform: rotate(-225deg);
    transform: rotate(-225deg);
    border-left-color:#fb5353;
    border-top-color:#fb5353;
}
.circleProgress_right .circleProgress_over{
    left:-100%;
    -webkit-transform: rotate(-225deg);
    transform: rotate(-225deg);
    border-right-color:#fb5353;
    border-bottom-color:#fb5353;
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
}
.gray .circleProgress_over{
    border-color:transparent;
}

.point_wraper{
    width:50px;
    height:100%;
    position:absolute;
    margin-left:-25px;
    left:50%;
    top:0;
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
}
.point_num{
    background:#fb5353;
    width:100%;
    height:50px;
    line-height:50px;
    border-radius:50%;
    text-align:center;
    position: absolute;
    left:0;
    top:-25px;
    color:#fff;
    font-size:18px;
}
.gray .point_num{
    background:#dcdcdc;
}


    </style>
</head>
<body>
    <div class="circleProgress_wrapper">
    <div class="circleProgress circleProgress_bg"></div>
    <div class="circleProgress_half circleProgress_left">
        <div class="circleProgress circleProgress_over"></div>
    </div>
    <div class="circleProgress_half circleProgress_right">
        <div class="circleProgress circleProgress_over"></div>
    </div>
    <div class="point_wraper">
        <div class="point_num"></div>
    </div>
</div>
</body>
</html>